import React, { Component } from 'react';
import {Button} from 'antd';
import {observer} from 'mobx-react';
import user from '../mobx/user.js';
import { connect } from 'react-redux';
import {getGoodsList,getTitle} from '../redux/action/index.js';
import {basePath} from '../js/config';
import '../css/index.less';
import api from '../js/api.js';
import userApi from '../http/userApi.js';
// const mapStateToProps = (state) => {
//     return {
//         num: state.calculate.num
//     };
// };
// const mapDispatchToProps = (dispatch) => ({
//     increment: (v) => dispatch(incrementAction(v)),
//     decrement: () => dispatch(reduceAction)
// });
@connect(
    (state)=>(state)
)
@observer
class Home extends Component {
    componentDidMount(){
        // userApi.getGoodsList()
        // this.props.dispatch(getTitle())
    }
    navTo=()=>{
        this.props.history.push('/list')
    }
    changeData=()=>{
        const List = [
            {name:'李婕'},
            {name:'李宇思'},
            {name:'吴文青'},
            {name:'吴念'},
        ]
        const action = getGoodsList(94520)
        this.props.dispatch(action)
    }
    render() {
        return (
            <div>
                <h1>{this.props.calculate.title}--</h1>
                <div style={{width:100,height:100,border:'1px solid blue'}}>
                    <img style={{width:100}} src={basePath+"/static/images/003.jpg"} alt=""/>
                </div>
                2
                <div className='bg'></div>
                <Button onClick={user.changeUser} type='primary'> 富士山下{user.userInfo}</Button>
                <h2 className='name' onClick={this.changeData}>{user.isReadyChatNum} -- {user.total} ----- {this.props.calculate.num} </h2> 
                <Button type='primary' onClick={this.navTo}>跳转</Button>
                {
                    this.props.calculate.goodsList.map((v,i)=>{
                        return(
                            <div key={i}>
                                <img width={100} src={v.img} alt="" />
                                {/* {v.title} */}
                            </div>
                        )
                    })
                }
                <Goods data={this.props.calculate}></Goods>
            </div>
        );
    }
}

class Goods extends Component {
    constructor(){
        super();
        this.state={
            prevPropName:'',
            name:123
        }
    }
    static getDerivedStateFromProps(nextProps,prevState){
        console.log(prevState)
        if(nextProps.data.title !== prevState.prevPropName){
            return {
                name: nextProps.data.title,
                prevPropName: nextProps.data.title
            }
        }
        return null;
    }
    componentDidMount(){
        console.log(this.props)
        const list = [1,2,3,4,5,6]
        var bodyFa = this.refs.bodyid
        list.map(v=>{
            var frameDiv = document.createElement("h"+v);//创建一个标签
            frameDiv.innerText = v+this.props.data.title
            bodyFa.appendChild(frameDiv);
        })
        // for (const iterator of list) {
        //     var frameDiv = document.createElement("h"+iterator);//创建一个标签
        //     frameDiv.innerText = iterator
        //     bodyFa.appendChild(frameDiv);
        // }
        
    }
    changeName=()=>{
        console.log(999)
        this.setState({
            name: '富士山下'
        })
    }
    render(){
        return(
            <div ref='bodyid'>
                <div onClick={this.changeName}>name:{this.state.name}</div>
            </div>
        )
    }
}
export default Home;